"use client"
import { LucideIcon } from 'lucide-react';
import React from 'react'
import { DialogDescription, DialogHeader, DialogTitle } from './ui/dialog';
import { cn } from '@/lib/utils';
import { Separator } from './ui/separator';

interface Props {
    title?: string;
    subTitle?: string;
    icon?: LucideIcon;

    iconClassName?: string;
    titleClassName?: string;
    subTitleClassName?: string
}

function CustomDialogHeader(props: Props) {
    return (
        <DialogHeader className='py-4'>
            <DialogTitle asChild>
                <div className="flex flex-col items-center gap-2 mb-2">
                    {props.icon && (
                        <props.icon size={30} className={cn("stroke-primary", props.iconClassName)} />
                    )}
                    {props.title && (
                        <p className={cn("text-xl text-primary", props.titleClassName)}>
                            {props.title}
                        </p>
                    )}
                </div>
            </DialogTitle>
            {props.subTitle && (
                <DialogDescription className={cn("text-sm text-muted-foreground text-center", props.subTitleClassName)}>
                    {props.subTitle}
                </DialogDescription>
            )}
            <Separator />
        </DialogHeader>
    )
}

export default CustomDialogHeader
